import { HTMLAttributes } from "react";
import styled from "styled-components";
import { NavLink, NavLinkProps } from 'react-router-dom';

/**
 * Стилизованный компонент меню навигации.
 * 
 * @property {HTMLAttributes<HTMLElement>} props - Свойства компонента.
 * @return {JSX.Element} - Стилизованный компонент навигации.
 */
export const StyledNav = styled.nav<HTMLAttributes<HTMLElement>>`
    display: flex;
    position: fixed;
    flex-direction: column;
    background-color: black;
    width: 13rem;
    transition: margin-left 500ms ease-out;
    height: calc(100vh - 5rem);
    top: 5rem;
    padding-top: 2rem;
    z-index: 100;

    // Вышел
    &.transition-exited {
        margin-left: -13rem;
    }

    // Входит
    &.transition-entering {
        margin-left: 0rem;
    }

    // Вошёл
    &.transition-entered {
        margin-left: 0rem;
    }

    // Выходит
    &.transition-exiting {
        margin-left: -13rem;
    }
`;

/**
 * Стилизованный компонент для элемента NavLink из react-router-dom.
 * 
 * @property {NavLinkProps} props - Свойства компонента.
 * @return {JSX.Element} - Стилизованный компонент NavLink.
 */
export const StyledNavLink = styled(NavLink) <NavLinkProps>`
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #DFE1E2;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    font-size: 1.125rem;
    font-family: 'Helvetica Neue Light';
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 1rem;
    border-radius: 0.2rem;
    

    &.active {
        background-color: gray;
    }

    &:hover {
        color: white;
    }
`;